import React from 'react'
import { Empty, Spin, Timeline } from 'antd'
import FreeScrollBar from 'react-free-scrollbar'
import style from './EmsList.module.less'

function Main ({ emsLoading, emsInfos = [] }) {
  return (
    <div>
      {emsLoading && <div className={style['loading-block']}><Spin /></div>}
      {!emsLoading && emsInfos.length === 0 ? (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      ) : null}
      {!emsLoading && emsInfos.length !== 0 ? (
        <div className={style['timeline-box']} id='ems'>
          <FreeScrollBar className='mock'>
            <Timeline className={style['ems-list']}>
              {
                emsInfos.map((li, i) => {
                  const obj = {}
                  if (i !== 0) {
                    obj.color = 'gray'
                  }
                  return (
                    <Timeline.Item {...obj} key={i}>
                      <p>{li.operatingTime}<br /> {li.remark}</p>
                    </Timeline.Item>
                  )
                })
              }
            </Timeline>
          </FreeScrollBar>
        </div>
      ) : null}
    </div>
  )
}

export default Main
